<template>
  <div class="app-container">
    <h3>新增优惠券</h3>
    <el-divider />
    <div class="u-flex u-flex-wrap">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="160px"
      >
        <el-form-item
          label="优惠券名称"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入优惠券名称"
          />
        </el-form-item>
        <el-form-item
          label="优惠券可使用次数"
          prop="amount"
        >
          <el-input
            v-model="form.amount"
            placeholder="请输入优惠券可使用次数"
          />
        </el-form-item>
        <el-form-item
          label="兑换券每日限制次数"
          prop="limitDay"
        >
          <el-input
            v-model="form.limitDay"
            placeholder="请输入兑换券每日限制次数"
          />
        </el-form-item>
        <el-form-item
          label="上下架状态"
          prop="status"
        >
          <el-radio-group v-model="form.status">
            <el-radio :label="1">
              上架
            </el-radio>
            <el-radio :label="0">
              下架
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="价格"
          prop="price"
        >
          <el-input
            v-model="form.price"
            placeholder="请输入价格"
          />
        </el-form-item>
        <el-form-item
          label="适用商品"
          prop="status"
        >
          <el-select
            v-model="form.goods"
            multiple
            filterable
            placeholder="请选择适用商品"
            style="width:100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="优惠券说明"
          prop="remark"
        >
          <el-input
            v-model="form.remark"
            type="textarea"
          />
        </el-form-item>
        <el-form-item
          label="有效期"
          prop="date"
        >
          <el-date-picker
            v-model="form.date"
            type="datetimerange"
            range-separator="至"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit('form')"
          >
            提交
          </el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { goodsDetail, saveProducts, updateGoods, goodsPage, addCoupon } from "@/api/user";
import { deepClone } from '@/utils'
export default {
  data() {
    return {
      list: [],
      loading: false,
      // currentPage: 1,
      queryData: {
        status: "", //	商品状态 0 下架 1 上架
        name: "",
      },
      pagination: {
        pageSize: 1,
        total: 1,
      },
      typeStatus: [
        { id: "", name: "不限" },
        { id: 0, name: "商品详情" },
        { id: 1, name: "H5" },
      ],
      form: {
        name: "",
        amount: "",
        limitDay: "",
        status: 0,
        price: "",
        goods: [],
        remark: "",
        date: []
      },
      rules: {
        name: [
          { required: true, message: "请输入优惠券名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
        ],
        amount: [{ required: true, message: "请输入优惠券可使用次数", trigger: "blur" }],
        limitDay: [{ required: true, message: "请输入兑换券每日限制次数", trigger: "blur" }],
        status: [
          { required: true, message: "请选择上下架状态", trigger: "change" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        goods: [{ required: true, message: "请选择商品", trigger: "change" }],
        remark: [{ required: true, message: "请输入优惠券说明", trigger: "blur" }],
        date: [{ required: true, message: "请选择生效时间", trigger: "blur" }],
        
      },
      options: []
    };
  },
  computed: {
    currentPage: {
      get() {
        return this.queryData.pageIndex + 1;
      },
      set() {},
    },
  },
  created() {
    const { params, query } = this.$route;
    this.getList()
    if (query.goodsId) {
      this.goodsId = query.goodsId;
      this.goodsDetail(query.goodsId);
    }
  },
  methods: {
    getList() {
      goodsPage({}).then((res) => {
        this.options = res.data && res.data.map(item => {
          return {
            label: item.name,
            value: item.goodsId
          }
        });
      });
    },
    goodsDetail(goodsId) {
      goodsDetail(goodsId).then((res) => {
        this.form = res.data;
      });
    },
    hanleSearch() {
      this.queryData.pageIndex = 0;
      this.getList();
    },
    handleSizeChange(val) {
      // this.queryData.pageIndex = val - 1
      // this.getList()
    },
    handleCurrentChange(val) {
      this.queryData.pageIndex = val - 1;
      this.getList();
    },
    handleEdit(id) {
      this.$router.push({
        path: "/swiper/edit",
        query: {
          id: id,
        },
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid, b, c) => {
        let cloneData = deepClone(this.form)
        if (this.form.date) {
          cloneData['startTime'] = this.form.date[0]
          cloneData['endTime'] = this.form.date[1]
          delete cloneData.date
        }
        cloneData.goods = this.form.goods.join(',')
        if (valid) {
          // if (this.goodsId) {
            // this.form.goodsId = this.goodsId;
            addCoupon(cloneData).then(() => {
              this.$router.push("/coupon/page");
            });
          //   return;
          // }
          // saveProducts(this.form).then(() => {
          //   this.$router.push("/permission/page");
          // });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.el-form {
  width: 60%;
}
</style>
